<template> 
<div class="container"> 
<div class="total-border">    
 <el-header>
   <div class="heade"> 
        <div class="title-left">
       <el-button
          size="large"
          @click.native="handleEdit" icon="el-icon-arrow-left" plain>返回</el-button>  
      </div>       
      <div class="title">
        <h1>添加运动</h1> 
      </div>     
  </div>   
  </el-header>
    <!-- 添加    -->

      <div class="border">   
        <h1></h1>
        <el-form ref="form" label-width="85px">
          <el-form-item label="运动名称">
            <!-- <el-input style="width: 90%;margin-left:-150px;" v-model="sportsInfoPO.name" :disabled="true"></el-input> -->
           <span style="font-size:18px"> {{sportsInfoPO.name}}</span>
          </el-form-item>
          <el-form-item label="运动日期">
            <el-date-picker type="date" placeholder="选择日期" style=" width: 90%;margin-left:-60px;" v-model="date" ></el-date-picker>
          </el-form-item>
          <el-form-item label="运动时长">
            <el-input placeholder="0" type="number" style="width: 90%;margin-left:-40px;" min="0"  v-model="amount"></el-input>
            <span>{{this.sportsInfoPO.unit}}</span> 
          </el-form-item>
          <el-form-item label="备注">
            <el-input type="textarea" style="width: 90%;margin-left:-60px;" v-model="comment"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">添加</el-button>
            <el-button type="primary"  @click.native="backtoHome">取消</el-button>
            <el-button
              
              @click.native="backtoHome">返回运动主页</el-button>  
          </el-form-item>
        </el-form>
      </div> 
    </div>  
  </div>
</template> 
<script>
import { get, post } from "../ajax";
import { MessageBox } from "element-ui";

export default {
  name: "AddSports",
  components: {},
  data() {
    return {
      date: "",
      amount: 0,
      comment: "",
      sportsInfoPO: ""
    };
  },
  created() {},
  async mounted() {
    console.log(this.$route.query);
    const sportsId = parseInt(this.$route.query.sportsId);
    const res = await get("/SmartMachine/api/Sports/sports", {
      body: {
        sportsId: sportsId
      }
    });
    this.sportsInfoPO = res.data;
    this.date = this.$route.query.date;
  },
  methods: {
    buildData() {
      const data = {
        sportsInfoPO: this.sportsInfoPO,
        sportsRecordPO: {
          userId: this.$route.query.userId,
          sportsId: this.sportsInfoPO.id,
          amount: this.amount,
          date: this.date,
          energy: this.amount * this.sportsInfoPO.kcal,
          comment: this.comment,
        }
      };
      return data;
    },
    async onSubmit() {
      //console.log("submit!");
      const data = this.buildData();
      //console.log(data);
      if(data.sportsRecordPO.amount<=0){
        MessageBox.alert(`输入运动时长！`, "运动记录管理", {
          confirmButtonText: "好的",
        })
      }else{
        const res = await post("/SmartMachine/api/Sports/records", {
          body: data
        });
        //console.log(res);
        if (!res.error) {
          try {
            const result = await MessageBox.confirm(`添加成功`, "运动记录管理", {
              confirmButtonText: "返回运动主页",
              showCancelButton: true,
              cancelButtonText: "继续添加",
            });
            if (result === 'confirm') {
              //confirmButton
              this.backtoHome();
            }
          } catch (error) {
            //cancelButton
            this.backtoList();
          }
        }
      }
    },
    backtoHome() {
      this.$router.push({
        path: "/sports",
        query: {
          userId: this.$route.query.userId,
          date: this.$route.query.date
        }
      });
    }
  }
};
</script> 
<style scoped>
.container {
  width: 100%;
  margin: 0 auto;
}
.el-header {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
  margin: 20px;
}
.heade {
  display: flex;
  margin-left: 130px;
  margin-bottom: 20px;
  text-align: center;
  border-radius: 15px;
}
.total-border {
  width: 96%;
  height: 500px;
  border: 1px solid #ccc;
  margin: 20px;
}
.border {
  width: 98%;
  height: 350px;
  border: 1px solid #ccc;
  margin: 10px;
}
.item {
  flex: 0 0 30%;
  margin-top: 20px;
  margin: 20px;
  text-align: center;
  font-size: 8px;
  line-height: 5px;
}
.title {
  flex: 0 0 30%;
  margin-top: 3px;
  margin-left: 35%;
  font-size: 10px;
  line-height: 25px;
}
.title-left {
  margin-left: -20%;
}
</style> 

<style>
  .el-form-item__label{
    font-size:18px!important;
    margin-left:10px!important;
  }
</style>